<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="../styles/common.css" rel="stylesheet">
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <script src="../scripts/Plugin/echarts.min.js"></script>
    <script src="../scripts/common.js"></script>
    <script src="../scripts/index.js"></script>
    <script src="../scripts/Plugin/laydate/laydate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--顶部-->
<!--<header class="header left">-->
<!--    <div class="left nav">-->
<!--        <ul>-->
<!--            <li class="nav_active"><i class="nav_1"></i><a href="index.html">采集概况</a> </li>-->
<!--            <li><i class="nav_2"></i><a href="../../index_bk.html">返回主页</a> </li>-->
<!--            </ul>-->
<!--    </div>-->
<!--    <div class="header_center left" style="position:relative">-->

<!--        <h2><strong>监护仪数据看板</strong></h2>-->

<!--    </div>-->
<!--    <div class="right nav text_right">-->
<!--        <ul>-->

<!--        </ul>-->
<!--    </div>-->

<!--</header>-->
<!--内容部分-->
<div class="con left" id="app">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_1.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>血压(NIBP)</p>
                    <p>{{resp.f_blood_pressure_upper}}/{{resp.f_blood_pressure_lower}}mmHg</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_2.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>心率(HR)</p>
                    <p>{{resp.f_heart_radio}}</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_3.png" class="left text01_img"/>
                <div class="text01e_div">
                    <p>监测中...</p>
                    <p class="sky">{{resp.f_message_emergency}}</p>
                </div>金雀医疗
            </div>
<!--            <div class="con_div_text01 right">-->
<!--                <img src="../images/info_4.png" class="left text01_img"/>-->
<!--                <div class="left text01_div">-->
<!--                    <p>服用药物</p>-->
<!--                    <p class="sky">{{resp.f_medicines}}</p>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>呼吸</p>
                    <p class="org">{{resp.f_breathe}}</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_6.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>服用药物</p>
                    <p class="org">{{resp.f_medicines}}</p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="div_any02">
            <div class="div_any_child div_height">
                <div class="div_any_title any_title_width"><img src="../images/title_0.png">心电波形</div>
                <div id="mapChart" style="width:97.5%;height:108.5%;display: inline-block;padding-left: 1.25%;padding-top:0.01%"></div>
            </div>
        </div>
        <div class="div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_3.png">实时参数监测</div>
                <p id="lineChart" class="p_chart"></p>
            </div>
        </div>
<!--        <div class="div_any01">-->
<!--            <div class="div_any_child">-->
<!--                <div class="div_any_title"><img src="../images/title_4.png">default</div>-->
<!--                <p id="lineChart2" class="p_chart"></p>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="left div_any01">-->
<!--            <div class="div_any_child">-->
<!--                <div class="div_any_title"><img src="../images/title_1.png">default</div>-->
<!--                <p id="pieChart1" class="p_chart"></p>-->
<!--            </div>-->
<!--            <div class="div_any_child">-->
<!--                <div class="div_any_title"><img src="../images/title_2.png">default</div>-->
<!--                <p id="histogramChart" class="p_chart"></p>-->
<!--            </div>-->
<!--        </div>-->
    </div>


</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            timer : '',
            dataUrl: '/v1/print',
            graphUrl: '/v1/show',
            monitorInfoUrl: '/v1/monitorInfo',
            pyUrl: '/api',
            healthInfoUrl: '/api/v1/healthinfo',
            resp: 'no data',
        },
        created: function () {
            this.init()
        },
        methods: {
            init: function () {
                this.timer = setInterval(() => {
                    this.getMonitorInfo();
                }, 1000);
            },
            getMonitorInfo: function () {

                this.$http({
                    method: 'GET',
                    url: this.monitorInfoUrl,
                }).then(function(response){
                    this.resp = response.data;
                    modifyLineChart(response.data);
                },function (error) {
                    this.resp = 'error message: ' + error
                })
            },
            freshGraph: function () {
                document.getElementById('graph').contentWindow.location.reload(true);
            },
            beforeDestory: function () {
                cleanInterval(this.timer);
            },
            pyapiHelper: function () {
                this.$http({
                    method: 'GET',
                    url: this.pyUrl,
                }).then(function (response) {
                    this.resp = response.data;
                }, function (error) {
                    this.resp = 'error message: ' + error
                })
            },
            healthInfoHelper: function () {
                this.$http({
                    method: 'GET',
                    url: this.healthinfoUrl,
                }).then(function (response) {
                    this.resp = response.data;
                }, function (error) {
                    this.resp = 'error message: ' + error
                })
            }
        }
    })

</script>

</body>
</html>
